<template>
  <div class="article-skeleton">
    <article class="article-skeleton__wrapper">
      <div class="article-meta">
        <div class="img"></div>

        <div class="article-meta-info">
          <div class="author-name"></div>

          <div class="article-info"></div>
        </div>
      </div>

      <div class="article-img">
        <div class="img"></div>
      </div>

      <div class="article-content">
        <div class="article-content-item1"></div>
        <div class="article-content-item2"></div>
      </div>
    </article>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.article-skeleton {
  width: 100%;
  max-width: 820px;
  border-radius: 4px;
  background-color: white;

  &__wrapper {
    box-sizing: border-box;
    width: 100%;
    padding: 1.8rem;

    .article-title {
      line-height: 1.31;
      width: 100%;
      height: 42px;
      margin: 0 0 1.667rem;
      background-color: #f0f0f0;

      h1 {
        font-size: 2rem;
        font-weight: 600;
        color: #252933;
      }
    }

    .article-meta {
      display: flex;
      align-items: center;
      width: 100%;
      height: 48px;
      margin-bottom: 1.667rem;

      .img {
        flex: 0 0 auto;
        width: 3.333rem;
        height: 3.333rem;
        margin-right: 1rem;
        border-radius: 50%;
        background-color: #f0f0f0;
      }

      &-info {
        flex: 1;
        flex-grow: 1;
        min-width: 0;
        min-height: 43px;

        .author-name {
          width: 100px;
          height: 1rem;
          background-color: #f0f0f0;
        }

        .article-info {
          width: 40px;
          height: .8rem;
          margin-top: 10px;
          background-color: #f0f0f0;
        }
      }
    }

    .article-img {
      width: 100%;

      .img {
        position: relative;
        width: 100%;
        height: 420.5px;
        background-color: #f0f0f0;

        -o-object-fit: cover;
           object-fit: cover;
      }
    }

    .article-content {
      width: 100%;
      margin-top: 60px;

      .article-content-item1 {
        width: 500px;
        height: 40px;
        background-color: #f0f0f0;
      }

      .article-content-item2 {
        width: 700px;
        height: 20px;
        margin-top: 30px;
        background-color: #f0f0f0;
      }
    }
  }
}

</style>
